import React, { Component } from 'react';
import { connect } from 'react-redux';
import SidebarAPI from '../../../api/sidebar/index';
import {Icon,Card} from 'antd'
import {NewTask,OpenTask,CloseTask} from '../../../actions/task'
import {observer} from "mobx-react";
import { observable, action, computed ,autorun} from "mobx";
import {taskList} from '../../../store/index'
import './App.scss'
// var timerData = observable({
//   secondsPassed: 0
// });

// class Demo extends Component{
//   state={
//     val:[],
//     index:0
//   }
//    constructor(){
//     super()
//       autorun(() => {
//         console.log("run")
//          this.setState({val:taskList.list,index:taskList.index})
//         })
//   }
//   render(){
//     return(
//     <div>
//       <div>
//         <h1>
//         {
//           this.state.val.map(item=>(
//            item.id
         
//           ))
//         }
//         </h1>
//         </div>
//     </div>)
//   }
// }


const classNames = require('classnames');
const { Meta } = Card;

class App extends Component {
  state = {
      apps:[],
      visible:false,
  }
  constructor(){
    super()
    this.onAppClick=this.onAppClick.bind(this)
    
  }
  async getAppList() {
    const response = await SidebarAPI.getAppList();
    const { code, data } = response;
    console.log(response);
    data.push({
      deleted:false,
      icon:"icon-office",
      id:"manage",
      method:"manage",
      nickname:"主体管理",
      sequence:1,
      url:"/manage",
    });
    if (code === 1) {
      this.setState({
        apps: data,
      });
    } else {
       message.error('应用列表获取失败，请重试!');
    }
  }
  componentWillReceiveProps(nextProps) {
   this.setState({visible:nextProps.visible})
  }
  componentDidMount() {
      this.getAppList();
  }
  
  onAppClick(id,name){
      console.log(name)
      taskList.index+=1;
      taskList.list.push({name:name,id:id,uuid:taskList.index})
      //console.log(taskList.list[0].name)
     
  
  }

  render() {
    const className = classNames('app', { hide: !this.state.visible });
    return (
      <div className={className}>
      {
               this.state.apps.map(item => (
            // <h1 type="home" key={item.id}>{item.nickname}</h1>
    <div style={{ width: 80,height:80,margin:10,marginRight:0,textAlign:"center"}} key={item.id} onClick={this.onAppClick.bind(this,item.id,item.nickname)}>
    <img alt="example" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525241905080&di=cc7014f88c9b5e00c3c1afbf14d97109&imgtype=0&src=http%3A%2F%2Ffile01.16sucai.com%2Fd%2Ffile%2F2013-11-10%2F13840528533913.png" className="appImg"/>
    <h5>{item.nickname}</h5>
    </div>
      ))
     
      }
     
     </div>
    );
  }
}

App.propTypes = {
 // selectedMenu: PropTypes.string.isRequired,
};

const mapStateToProps = state => ({
   
});
var hwnd=0;
const mapDispathToProps=dispatch=>({
  newTask:task=>dispatch ({type:"TASK_NEW",task:{task:task,hwnd:hwnd++}})
})
export default connect(mapStateToProps,mapDispathToProps)(App);
export {timerData}
